<template>
	<div class="setup">
		<div class="content">
			<div class="header">
				<div>
					<span class="title">设置</span>
					<div class="toolbar">
						<div class="toolbar-item restore-default-setup" @click="restoreDefaultSetup">
							<el-icon class="icon">
								<RefreshLeft />
							</el-icon>
							<span class="text">恢复默认设置</span>
						</div>
						<div class="toolbar-item close-and-save" @click="save">
							<el-icon class="icon">
								<CloseBold />
							</el-icon>
							<span class="text">关闭并保存</span>
						</div>
					</div>
				</div>
			</div>
			<div class="main">
				<div class="aside">
					<div class="nav">
						<div
							class="nav-item"
							v-for="item in navList"
							:key="item.value"
							:class="{ active: navActive === item.value }"
							@click="onClick(item.value)">
							{{ item.label }}
						</div>
					</div>
				</div>
				<div class="body scroll">
					<component :is="activeComponent" :value="activeData" @update:value="updateValue" />
				</div>
			</div>
		</div>
		<div class="footer"></div>
	</div>
</template>

<script setup lang="ts">
import { ref, markRaw, reactive, watch } from 'vue';
import Base from './base.vue';
import { AnyKey } from '@p/utils';
import { API } from '@v/utils/API';
import { useRootStore } from '@v/store';
import { ElMessageBox } from 'element-plus';
import { ConfigFile } from '@p/main-config-file';
import { CloseBold } from '@element-plus/icons-vue';
import { RefreshLeft } from '@element-plus/icons-vue';

const store = useRootStore();

const props = defineProps({
	close: Function,
});

let configFile: ConfigFile = reactive(JSON.parse(JSON.stringify(store.configFile)));

watch(
	() => store.configFile,
	(n) => {
		configFile = JSON.parse(JSON.stringify(n));

		for (let i = 0; i < navList.length; i++) {
			navList[i].data = (configFile as AnyKey<any>)[navList[i].value];
		}

		const obj = navList.find((t) => t.value === navActive.value);

		if (obj) {
			activeData.value = obj.data;
		}
	}
);

const navList = reactive([
	{
		label: '基本设置',
		value: 'base',
		component: markRaw(Base),
		data: configFile.base,
	},
]);

let navActive = ref(navList[0].value);
let activeComponent = ref(navList[0].component);
let activeData = ref(navList[0].data);

// 点击回调
function onClick(s: string) {
	const obj = navList.find((t) => t.value === s);

	navActive.value = s;
	if (obj) {
		activeComponent.value = obj.component as any;
		activeData.value = obj.data;
	}
}

// 更新 value 回调
function updateValue(value: any) {
	(configFile as AnyKey<any>)[navActive.value] = value;
}

// 保存
function save() {
	API.send('set-config-file', JSON.parse(JSON.stringify(configFile)));
	store.setConfigFile(configFile);

	props.close && props.close();
}

// 恢复默认设置
function restoreDefaultSetup() {
	ElMessageBox.confirm('确定恢复默认设置吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		API.invoke('restore-default--config-file').then((value) => {
			store.setConfigFile(value);
		});
	});
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 1300px) {
	.setup {
		--width: 1200px !important;
	}
}
.setup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 24px);
	z-index: 1;

	--width: calc(100% - 100px);
	--title-height: 60px;
	--aside-width: 220px;
	--body-margin-left: 40px;

	.content {
		width: 100%;
		height: 100%;
		background-color: var(--fill-color-4);
		.header {
			width: 100%;
			height: var(--title-height);
			box-shadow: 0 1px 0 0 var(--opacity-purity-color-10);
			& > div {
				display: flex;
				align-items: center;
				justify-content: space-between;
				max-width: var(--width);
				min-width: 700px;
				height: 100%;
				margin: 0 auto;
				.title {
					font-size: 18px;
				}
				.toolbar {
					display: flex;

					.toolbar-item {
						padding: 6px 10px;
						border-radius: 4px;
						background-color: var(--opacity-purity-color-4);
						font-size: 14px;
						display: flex;
						align-items: center;
						margin-left: 10px;
						&:hover {
							background-color: var(--opacity-purity-color-8);
							color: var(--theme-main-color);
							cursor: pointer;
						}
						.icon {
							margin-right: 6px;
						}
					}
				}
			}
		}
		.main {
			max-width: var(--width);
			min-width: 700px;
			height: calc(100% - var(--title-height));
			margin: 0 auto;
			overflow: hidden;
			display: flex;
			.aside {
				width: var(--aside-width);
				height: 100%;
				.nav {
					margin-top: 40px;
					.nav-item {
						padding: 10px 14px;
						border-radius: 4px;
						font-size: 14px;
						color: var(--text-color-3);
						user-select: none;
						&:hover {
							background-color: var(--mouse-hover-bg-color-1);
							cursor: pointer;
						}
						&.active {
							color: var(--theme-main-color);
							background-color: var(--mouse-hover-bg-color-2);
						}
					}
				}
			}
			.body {
				width: calc(100% - (var(--aside-width) + var(--body-margin-left)));
				height: calc(100% - 40px);
				margin-left: var(--body-margin-left);
				padding-top: 40px;
			}
		}
	}
	.footer {
		height: 24px;
		width: 100%;
		display: none;
	}
}
</style>
